Estoy aquí para preguntarle sobre una pregunta de CSS. ¿Cómo puedo alinear estos elementos como se muestran en la imagen? Proporcionaré también código HTML.
https://i.imgur.com/ByO5bIC.png
<header> <div class="header-main"> <a href="about-us.html">ABOUT US</a> <a id="toplica" href="index.html">TOPLICA</a> <a href="contact.html">CONTACT</a> </div> <div class="social-media"> <span class="iconify" data-icon="ant-design:instagram-filled" style="color: #ba4a1d;"></span> <span class="iconify" data-icon="ant-design:facebook-filled" style="color: #ba4a1d;"></span> <span class="iconify" data-icon="fluent:location-28-filled" style="color: #ba4a1d;"></span> </div> </header>Gracias.
Puede usar la propiedad flex en cada contenedor principal y darles propiedades como:
.PARENT_CONTAINER_NAME{ display: flex; justify-content: center; // for horizontal alignment align-items: center; // for vertical alignment } Asegúrese de dar height y width al contenedor principal y experimente con algunos otros valores de justify-content para obtener el resultado deseado.
Prueba esto:
<header class="header-flex"> <div> /* keep it empty */ </div> <div class="header-main"> <a href="about-us.html">ABOUT US</a> <a id="toplica" href="index.html">TOPLICA</a> <a href="contact.html">CONTACT</a> </div> <div class="social-media"> <span class="iconify" data-icon="ant-design:instagram-filled" style="color: #ba4a1d;"></span> <span class="iconify" data-icon="ant-design:facebook-filled" style="color: #ba4a1d;"></span> <span class="iconify" data-icon="fluent:location-28-filled" style="color: #ba4a1d;"></span> </div> </header>y luego en tu header-flex:
.header-flex { display:flex; width: 100vw; justify-content: center; align-items: center; }y en su encabezado principal:
.header-main { display:inline-block; margin: 0 15vw; /* replace 15vw with whatever margin you need to push the social media icons to the edge */ }simplemente puede poner .socail-media dentro de .header-main como el siguiente código
<style> .header-main{ display: flex; justify-content: center; align-items: center } a{ margin: 0 5px;} .social-media{ display: flex; justify-content: end; } </style> <header> <div class="header-main"> <a href="about-us.html">ABOUT US</a> <a id="toplica" href="index.html">TOPLICA</a> <a href="contact.html">CONTACT</a> </div> <div class="social-media"> <span class="iconify" data-icon="ant-design:instagram-filled" style="color: #ba4a1d;"></span> <span class="iconify" data-icon="ant-design:facebook-filled" style="color: #ba4a1d;"></span> <span class="iconify" data-icon="fluent:location-28-filled" style="color: #ba4a1d;"></span> </div> </header>para espacio entre etiquetas use margen